<!-- pages/rateDriver/rateDriver.vue -->
<template>
  <view class="rate-page">
    <!-- 顶部订单信息 -->
    <view class="card">
      <view class="card-title">订单信息</view>
      <u-cell-group :border="false">
        <u-cell title="订单编号" :value="order.orderNumber" :border="false" />
        <u-cell title="出发时间" :value="actualStart" :border="false" />
        <u-cell title="到达时间" :value="actualEnd" :border="false" />
        <u-cell
          title="实际里程"
          :value="order.actualMileage + ' 公里'"
          :border="false"
        />
        <u-cell
          title="燃油费用"
          :value="'¥' + order.fuelCost"
          :border="false"
        />
        <u-cell
          title="其它费用"
          :value="'¥' + order.otherCost"
          :border="false"
        />
      </u-cell-group>
    </view>

    <!-- 司机信息 -->
    <view class="card">
      <view class="card-title">司机信息</view>
      <view class="driver-box">
        <u-avatar :src="driver.avatar" size="70" mode="aspectFill" />
        <view class="driver-right">
          <text class="driver-name">{{ driver.name }}</text>
          <text class="driver-sub">
            驾龄 {{ driver.drivingExperience || 0 }} 年 | 驾照
            {{ driver.licenseType }}
          </text>
          <u-rate
            :value="driver.rating || 0"
            readonly
            allow-half
            size="24"
            active-color="#FFB800"
          />
          <text class="driver-score"
            >{{ (driver.rating || 0).toFixed(1) }} 分</text
          >
        </view>
      </view>
    </view>

    <!-- 评价区域：已评价仅展示，未评价可交互 -->
    <view class="card">
      <view class="card-title">我的评价</view>

      <!-- 已评价：只读展示 -->
      <template v-if="isRated">
        <view class="rate-box">
          <u-rate
            :value="order.rating"
            readonly
            allow-half
            size="36"
            active-color="#4A90E2"
          />
          <text class="rate-text">{{ order.rating }}.0 分</text>
        </view>
        <view class="feedback-show">
          {{ order.feedback || "用户未填写文字评价" }}
        </view>
      </template>

      <!-- 未评价：可打分 + 输入 + 提交 -->
      <template v-else>
        <view class="rate-box">
          <u-rate
            v-model="submitForm.rating"
            size="36"
            active-color="#4A90E2"
          />
          <text class="rate-text">{{ submitForm.rating }}.0 分</text>
        </view>
        <view class="card-title" style="margin-top: 24rpx">评价内容</view>
        <u-textarea
          v-model="submitForm.feedback"
          placeholder="说说这次行程体验吧～"
          maxlength="200"
          height="160"
          count
        />
        <u-button
          type="primary"
          shape="circle"
          :loading="loading"
          @click="handleSubmit"
        >
          提交评价
        </u-button>
      </template>
    </view>

    <!-- 底部已评价提示 -->
    <view class="rated-tip" v-if="isRated">
      <text class="tip-text">您已评价</text>
      <text class="tip-sub">感谢您的反馈</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      driver: { rating: 0 },
      order: { rating: null, feedback: "" },
      detail: {},
      loading: false,
      submitForm: { rating: 5, feedback: "" },
    };
  },
  computed: {
    isRated() {
      return this.order.rating != null || this.order.feedback;
    },
    actualStart() {
      return this.order.actualStartTime?.replace("T", " ") || "";
    },
    actualEnd() {
      return this.order.actualEndTime?.replace("T", " ") || "";
    },
  },
  onLoad(opt) {
    if (opt.id) this.initData(opt.id);
  },
  methods: {
    async initData(id) {
      uni.showLoading({ title: "加载中" });
      try {
        const res = await uni.$http.get(
          `/sys/applications/userAppDetail/${id}`
        );
        const d = res.data.data;
        this.order = d.order || {};
        this.driver = d.driver || {};
        this.detail = d.application || {};
      } catch (e) {
        uni.showToast({ title: "加载失败", icon: "none" });
      } finally {
        uni.hideLoading();
      }
    },
    async handleSubmit() {
      if (!this.submitForm.rating) {
        uni.showToast({ title: "请选择评分", icon: "none" });
        return;
      }
      this.loading = true;
      try {
        await uni.$http.put("/sys/orders/rate", {
          id: this.order.id,
          rating: this.submitForm.rating,
          feedback: this.submitForm.feedback.trim(),
        });
        uni.showToast({ title: "评价成功", icon: "success" });
        setTimeout(() => uni.navigateBack(), 800);
      } catch (e) {
        uni.showToast({ title: e.message || "提交失败", icon: "none" });
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.rate-page {
  min-height: 100vh;
  background: #f5f6fa;
  padding: 24rpx;
}
.card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
}
.card-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
}
.driver-box {
  display: flex;
  align-items: center;
  .driver-right {
    margin-left: 24rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    .driver-name {
      font-size: 30rpx;
      font-weight: 600;
      color: #333;
    }
    .driver-sub {
      font-size: 26rpx;
      color: #999;
      margin: 6rpx 0 10rpx;
    }
    .driver-score {
      font-size: 24rpx;
      color: #ffb800;
      margin-left: 12rpx;
    }
  }
}
.rate-box {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  .rate-text {
    margin-left: 24rpx;
    font-size: 32rpx;
    color: #4a90e2;
    font-weight: 600;
  }
}
.feedback-show {
  background: #fafafa;
  border-radius: 8rpx;
  padding: 20rpx;
  margin: 20rpx 0 30rpx;
  font-size: 28rpx;
  color: #555;
  line-height: 1.6;
}
.rated-tip {
  text-align: center;
  padding: 40rpx 0;
  .tip-text {
    display: block;
    margin-top: 16rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
  .tip-sub {
    display: block;
    margin-top: 8rpx;
    font-size: 26rpx;
    color: #999;
  }
}
</style>
